<template>
  <div class="answer-item-container">
    <div class="author-info">
      <img :src="imgUrl" alt="" />
      <span class="author-name">{{ answerMessage.username }}</span>
    </div>
    <div class="answer-detail">
      <p class="like-number">{{ like }}人赞同了该回答</p>
      <div v-html="answerMessage.content"></div>
      <p class="answer-time">发布于 10-02</p>
    </div>
    <div class="function-area">
      <button
        class="support"
        @click="support"
        :class="{ 'is-support': isSupport }"
      >
        <Icon type="md-arrow-dropup" size="20" />{{ buttonMessage }}
      </button>
      <button class="down"><Icon type="md-arrow-dropdown" size="20" /></button>
      <span class="add-comment" @click="comment"
        ><Icon type="ios-text-outline" size="20" />{{ commentMessage }}</span
      >
      <span class="share"><Icon type="ios-paper-plane" size="" />分享</span>
      <span class="collect"
      @click="handleCollection"
        ><Icon type="md-star" size="20"  />{{cancelCollection}}</span
      >
      <span class="like"><Icon type="md-heart" size="20" />喜欢</span>
    </div>
    <div class="comment-area" v-if="showComment">
      <div class="comment-header">
        <h4 class="comment-number">{{ commentList.length }}条评论</h4>
      </div>

      <div v-for="(item, index) in commentList" :key="index">
        <comment-item :commentMessage="item" />
      </div>

      <write-comment @submmit="addComment" ref="comment" />
    </div>
  </div>
</template>
<script>
import axios from "@/util/axios";

import CommentItem from "@/components/question/comment/CommentItem";
import WriteComment from "@/components/question/comment/WriteComment";
import { getSessionStorage } from '@/common/utils';

export default {
  name: "AnswerItem",
  components: {
    CommentItem,
    WriteComment,
  },
  props: {
    answerMessage: {
      type: Object,
      default() {
        return {};
      },
    },
    left: {
      type: String,
      default: ''
    },
    cancelCollection: {
      type: String,
      default: '收藏'
    }
  },
  data() {
    return {
      isSupport: false,
      showComment: false,
      like: 0,
      likeMessage: "",
      commentList: [],
    };
  },
  methods: {
    // 收藏回答
    async handleCollection() {

      // 获取用户id
      const userId = getSessionStorage("userId");
      // console.log('收藏', userId);
      const res = await axios.post("/fav/favAnswer", {
        data: {
          favstate: '1',
          user_id: userId,
          answer_id: this.answerMessage.id,
        },
      });
      if (res.code == 1) {
        this.$Message.success("收藏成功");
      }
    },
    //获取用户是否点赞了该回答
    checkSupport() {
      axios
        .get("thumb/thumbState", {
          params: {
            user_id: localStorage.getItem("userId"),
            answer_id: this.answerMessage.id,
          },
        })
        .then((res) => {
          if (res.data === 1) {
            this.isSupport = true;
          } else {
            this.isSupport = false;
          }
        });
    },
    //获取用户是否已经收藏
    checkFav() {},
    //获取回答的点赞数
    getLike() {
      axios
        .get("thumb/thumbCount", {
          params: {
            answerId: this.answerMessage.id,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code === "1") {
            if (res.data === "null") {
              this.like = 0;
            } else this.like = res.data;
          }
        });
    },
    //赞同回答
    support() {
      if (!this.isSupport) {
        //点赞
        axios
          .post("thumb/thumbAnswer", {
            data: {
              thumbstate: "1",
              user_id: localStorage.getItem("userId"),
              answer_id: this.answerMessage.id,
            },
          })
          .then((res) => {
            // console.log(res);
            if (res.code === "1") {
              this.isSupport = true;
              this.like++;
            }
          });
      } else {
        axios
          .post("thumb/thumbAnswer", {
            data: {
              thumbstate: "0",
              user_id: localStorage.getItem("userId"),
              answer_id: this.answerMessage.id,
            },
          })
          .then((res) => {
            // console.log(res);
            if (res.code === "1") {
              this.isSupport = false;
              this.like--;
            }
          });
      }
      this.isSupport = !this.isSupport;
    },
    //收藏回答
    favAnswer() {},
    //展示评论
    comment() {
      if (!this.showComment) {
        this.showComment = true;
      } else this.showComment = false;
    },
    //添加评论
    addComment(value) {
      //对value值判空
      if (value === "") return;
      else {
        //发送请求
        axios
          .post("comment/commentAnswer", {
            data: {
              content: value,
              reply_id: localStorage.getItem("userId"),
              answer_id: this.answerMessage.id,
            },
          })
          .then((res) => {
            // console.log(res);
            if (res.code === "1") {
              this.$Message.success("评论发布成功");
              //清空输入框中的文字
              this.$refs.comment.value = "";
              this.getComments();
            }
          });
      }
    },
    //获取评论
    getComments() {
      axios
        .get("comment/getAllComment", {
          params: {
            answerId: this.answerMessage.id,
          },
        })
        .then((res) => {
          // console.log(res);
          if (res.code === "1") {
            this.commentList = [];
            this.commentList.push(...res.data);
          }
        });
    },
  },
  mounted() {
    //获取点赞数
    this.getLike();
    //获取用户是否点赞
    this.checkSupport();
    //获取所有评论
    this.getComments();
  },
  computed: {
    buttonMessage() {
      //没有点赞
      if (this.isSupport) {
        return `已赞同 ${this.like}`;
      } else return `赞同 ${this.like}`;
    },
    commentMessage() {
      let number =
        this.commentList.length > 0
          ? `${this.commentList.length}条评论`
          : "添加评论";
      let message = this.showComment === true ? "收起评论" : number;
      return message;
    },
    imgUrl() {
      return 'http://39.102.60.119:8080/zhihu/'+this.answerMessage.iconPath
    },
  },
};
</script>

<style scoped lang="scss">
$comment-border: 1px solid #f6f6f6;
.answer-item-container {
  width: 100%;
  border-bottom: 0.1rem solid #f6f6f6;
  padding: 1.5rem 0;
  .author-info {
    height: 4rem;
    width: 100%;
    display: flex;
    align-items: center;
    img {
      height: 100%;
    }
    .author-name {
      margin-left: 0.5rem;
      font-weight: 600;
      font-size: 1.5rem;
      line-height: 4rem;
    }
  }

  .answer-detail {
    line-height: 1.6;
    margin-top: 1.5rem;
    .like-number {
      color: #8590a6;
      cursor: pointer;
    }
    .answer-time {
      color: #8590a6;
    }
  }

  .function-area {
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 1rem;
    height: 3.4rem;
    button {
      padding: 0 0.5rem;
      height: 100%;
      background-color: rgba(0, 132, 255, 0.1);
      color: #0084ff;
      font-size: 1.4rem;
    }
    > * {
      margin-right: 1.5rem;
    }
    .support {
      margin-right: 0.2rem;
    }
    .down {
      padding: 0 0.5rem;
      &:hover {
        background-color: rgba(0, 132, 255, 0.15);
      }
    }
    > span {
      color: #8590a6;
      cursor: pointer;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      > i {
        margin-right: 0.2rem;
      }
    }
    .is-support {
      background-color: #0084ff;
      color: #fff;
    }
  }
  .comment-area {
    font-size: 1.5rem;
    color: #121212;
    box-shadow: 0 0rem 0.7rem rgba(18, 18, 18, 0.1);
    margin-top: 1rem;
    border-radius: 0.4rem;
    .comment-header {
      border-bottom: $comment-border;
      .comment-number {
        font-weight: 600;
        height: 5.1rem;
        line-height: 5.1rem;
        padding-left: 2rem;
        border-bottom: $comment-border;
      }
    }
  }
}
</style>